PHP+VScodeのデバッグ環境の構築（Mac編）

Mac＋VScodeでPHPのデバック（Xdebug）ができるようになるまでの手順です。

少しつまづいたので忘れないようにメモっておくことにしました。

1 環境
2 MAMPの設定
3 VScodeの設定
4 PHPのデバッグ方法
- 4.1 ブレークポイントの設定
- 4.2 デバッグモードを有効にする
5 つまずきポイント

環境

今回作業した環境は下記になります。環境に依存する部分はあまりないと思います。

MacBook Pro 14 M1
macOS 12.6.4 Monterey
MAMP 6.6
Visual Studio Code 1.77.0

XdebugはMAMPに含まれます。

MAMPの設定

インストール済として話を進めます。ちなみにMAMPはPROである必要はありません。

PHPバージョンの確認

まずは使用するPHPのバージョンを確認します。これはMAMPのウィンドウに表示されているはずです。

今回の例ではPHPのバージョンは7.4.21です。

設定ファイルを編集する

デフォルトではXdebugが無効になっているので設定ファイルを編集して有効にする必要があります。

設定ファイルはアプリケーションフォルダにあるMAMPフォルダの中に保存されており、PHPのバージョン毎に場所が異なります。今回の場合は下記の場所になります。

/Applications/MAMP/bin/php/php7.4.21/conf/php.ini

必ず使用するPHPのバージョンのファイルを編集してください。

このファイルを開いて[xdebug]の項目を探すと下記のようにコメントアウトされているはずです。

[xdebug]
;zend_extension="/Applications/MAMP/bin/php/php7.4.21/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so"

先頭のセミコロンを削除して有効にし、さらに下に2行設定を追加して下記のように編集して保存します。

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.4.21/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_autostart = 1

MAMPを再起動

php.iniの編集が終わったらMAMPを再起動します。そうしないと設定が反映されないので必ず行ってください。

Xdebugのポートを確認

MAMPが起動したらphpinfoの画面を表示します。下記のようなURLの場合が多いと思いますがlocalhost:8888は自分の環境に合わせて変更してください。

http://localhost:8888/MAMP/phpinfo.php

この中でxdebug.remote_portの値を探します。

その数値を控えておいて下さい。後で使います。今回の場合は9000になります。

もしこの設定値がない場合、Xdebugが有効になっていない可能性があるのでphp.iniの設定を見直しましょう。

VScodeの設定

プラグインのインストール

まずは下記2つのプラグインをインストールします。PHPの開発を行うなら必須のプラグインです。

その他にもPHPで便利なプラグインはありますが最低限この2つは入れておきましょう。

launch.jsonファイルの作成

デバッグを有効にするためにはlaunch.jsonファイルを作る必要があります。といってもVScodeの方で自動で作ってくれます。

サイドバーをデバッグに切り替えましょう。そこに表示されている「launch.jsonファイルを作成します」というリンクをクリックするだけです。

そうするとlaunch.jsonが自動的に作成され表示されます。

環境によってはここまででXdebugが動くようになりますが、私はなりませんでした。

Xdebugのポートを編集

MAMPの設定のところでxdebug.remote_portの値を確認しましたね。その値とlaunch.jsonのListen for Xdebugという名前の設定にあるportの値を揃える必要があります。

上の画像のように、VScodeが自動生成したlaunch.jsonはportが9003になっています。これを9000に修正します。

launch.jsonを保存後、念のためVScodeを再起動しましょう。再起動しないと上手く動かない場合があります。

以上で設定は完了です。

PHPのデバッグ方法

ブレークポイントの設定

ブレークポイントは行番号の左画をクリックすることで設定できます。

ファイル毎に設定したブレークポイント有効・無効を切り替えたりすることもできます。

デバッグモードを有効にする

VScodeではデフォルトはF5を押すとデバッグモードになり、ステータスバーがオンレンジ色になりデバッグツールバーが表示されます。
デバッグサイドバーの上にある緑三角のボタンを押してもOKです。

このとき一つ注意があって、緑三角のボタンの横にあるドロップダウンでListen for Xdebugが選択されている必要があります。普通はデフォルトでこれが選択されているはずですが、別の項目が選択されているとデバッグできないので注意しましょう。

この状態でブラウザでPHPファイルを読み込むとブレークポイントで止まります。

つまずきポイント

何といってもxdebug.remote_portでしょう。私はこれに気付かず30分ぐらい無駄にしました。これを読んだ人は是非気をつけてくださいね。